<template>
  <view class="">
    <!-- 信息展示部分 -->
    <cover-view class="videoInfo">
      <cover-view class="describe">{{ item.username }}</cover-view>
      <cover-view class="describe">{{ item.title }}</cover-view>
      <cover-view class="describe info_tag">
        <cover-image src="/static/vicon/tag.svg" style="
                        display: inline-block;
                        line-height: 30rpx;
                        width: 30rpx;
                        height: 30rpx;
                        margin-top: 8rpx;
                        margin-right: 20rpx;
                      ">
        </cover-image>
        <view :class=" fold == false ? ' nofold':'title'" id="inbord">
          <text id="info">
            {{ item.msg }}
          </text>
        </view>
      </cover-view>
      <cover-view v-if="fold != null" class="isShowTitle">
        <cover-view></cover-view>
        <cover-view class="isShowTag" @click="toOrClose">{{ fold ? '展开':'收起'}}</cover-view>
      </cover-view>
    </cover-view>
    </cover-view>
  </view>

</template>
<script>
  import {
    mapState,
    mapMutations
  } from 'vuex'
  export default {

    props: {
      item: {
        typeof: Object,
        default: ''
      },
      navid: {
        type: Number,
        default: 0
      },
      index: {
        type: String,
        default: '0'
      },
    },
    data() {
      return {
        fold: null,
        first: 0,
        last: 0,
        LikeImg: false,
        collectImg: false,

      }
    },

    methods: {
      // 信息展开缩放
      toOrClose() {
        this.fold = !this.fold;
      },
    },
    mounted() {
      let that = this;
      const query = uni.createSelectorQuery().in(this);
      query.select('#inbord').boundingClientRect(data => {

        that.first = data.height;
      }).exec();
      query.select('#info').boundingClientRect(data => {
        that.last = data.height;
        if (Math.floor(this.first) < Math.floor(this.last)) {
          this.fold = true
        } else {
          this.fold = null
        }
      }).exec();

    },


  }
</script>
<style lang="scss">
  .title {
    width: 360rpx;

    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    word-break: break-all;
    white-space: pre-wrap;
  }

  .nofold {
    width: 360rpx;
    white-space: pre-wrap;
  }

  .isShowTitle {
    display: flex;
    justify-content: space-between;

    .isShowTag {
      width: 60rpx;
      text-align: center;
      padding: 0 10rpx;
      font-size: 25rpx;
      line-height: 40rpx;
      color: #fff;
      margin-left: 190rpx;
      letter-spacing: 4rpx;
      background-color: #2b2b2b;
    }
  }
</style>
